I am in no way pretending to be a developer, but I do try and code sites I design from time to time.
I am running into an issue where I used HTML5 Boilerplate to code a site and when on a desktop browser, it looks fine (http://cl.ly/image/3j0L3Q3k3W1S), but as soon as I move to Mobile Safari, the background seems to get nudged around quite a bit (http://cl.ly/image/0q0I2q1f1Y1c).
I've had the same problem with another site, so I'm assuming it's something in the code that I don't know about...
Any help with this would be greatly appreciated!
Related
I keep having CSS issues that only appear on deployment when viewed from an iPhone. I cannot replicate the issues from a Desktop/Laptop browser no matter what I try (resizing, using responsive design mode, etc.) My current solution is to guess a fix, deploy it and then check. Obviously this is horribly slow / inefficient. Is there a better way?
Using safari on a desktop to inspect the elements of a connected iPhone running safari is a thing ;)
https://www.browserstack.com/guide/how-to-inspect-element-on-iphone
To begin with, I just started my first job as a junior front-end developer and got a task to fix bugs in the safari browser. (Chrome works well).
Our web app is developed using TypeScript, React (with Material UI framework) and Webpack.
Unfortunately, I spent hours surfing the internet and trying to find a solution for these bugs, but I couldn’t. I feel these bugs come from Material UI, but I might be wrong. I hope someone can help me with that and thank you in advance!
So the main problems I encountered in Safari were kind of CSS bugs.
Take a look:
Chrome_View / Chrome_View_Wrapped
Safari_View / Safari_View_Wrapped (Bugs are marked)
As you can see the in Chrome everything looks okay, while in Safari some of the things get corrupted.
ToolBar items get wrapped even there is free space. You can take a look at html and CSS. For example, if I comment (margin: -16px;) last item gets to its place.
Blue drawer background is not displayed until you wrap it out. You can take a look at html and CSS. For example, if I comment (overflow-x: hidden;) it gets fixed.
Wrap button on click should transform its direction by 180 degrees.
Footer and Drawer do not display images.
If anyone is familiar with this kind of issues please share your experience.
P.s. It would be great to avoid putting everywhere prefixes manually.
Here's my website, I used a template for it
http://www.hdilapp.com
I tried it with 4 browsers:
Safari
Google Chrome
Firefox
Internet Explorer
Out of the 4, Safari performs the best. By "best", I mean the scrolling process is smooth. However, the scrolling is not smooth on Chrome occasionally. Well, for Firefox and IE, the scrolling is simply disappointing. It is very laggy.
This is my assumption right now: the reason that makes the scrolling so laggy is the way of the browser interpreting my code. However, I do not know which part of my code I should improve on.
My website is around 4.4MB. Is it because my website has too much to load? If that's the case, then why would Safari load my website so smoothly?
I'm not too familiar with html languages, thus, I don't understand the cause of this problem. Please help me!
Thanks :D
try analyzing your page here, it helped me a lot optimizing my sites:
https://developers.google.com/speed/pagespeed/insights/
Could be Hardware-dependent too, if you use different Devices for FF and Safari - some of my old Android Phones lag extremely...
I am running Thesis 1.8.5 on Wordpress and here is my site www.texashomeloanpro.com . Because I am kind of new to this whole web-design thing, it just occurred to me to check my site in both Internet Explorer and Safari browsers. Unfortunately, my site looks horrible in both of these. More specifically, my homepage fonts are showing up too large, my homepage sidebars aren't positions correctly, and some of my rounded edges aren't showing up.
I know this is quite a laundry-list of CSS issues but if someone could just give me some general direction I would really appreciate it.
Not sure if you've tried this already, but a CSS reset script usually does the trick for me.
It might break your webpage on the browser you are using, but the goal is to make the webpage look consistent across all browsers.
I am building a photo portfolio website using wordpress and editing an existing theme. I worked on it in firefox and checked a few times throughout at the styling in IE and it was always fine. But having basically finished I looked at it today and it in IE and it is totally messed up. None of the boxes on the main page are lined up right.
I tried using the code in the header to have IE render it as IE7 and that generally worked but it made some other little problems. I am not sure if the problem is my doctype. I don't really know what it should be, or if I changed something along the way that messed it up.
The site works perfectly in all other browsers that I have tried
Here is the site. http://theshalomimaginative.com/blog/
Thanks.
Youre <h3> tags aren't closed. One of the few instances where IE is actually rendering things correctly ;) Other browsers will allow us to make mistakes like this, but IE is more strict.
Never forget the value of validating your code!