I'm developing a website and currently testing it in Google chrome on my PC. I found out that on iPhone devices, the bottom toolbar that is present in Chrome, breaks the layout. I understand how to fix this, but - is there a way to test the layout without a physical iPhone?
in Chrome developer tools, for example, changing to mobile devices only changes the dimensions, it won't add a toolbar functionality.
(If it matters, my issue is having 100vh on pages, I understand how to fix but want to make sure before deploying)
If it's not possible to simulate (doesn't have to be Chrome obviously, could be anything), is there an alternative way to test the behavior when something like a toolbar unexpectedly changes the viewport?
Related
Edit: I found out that the issue is exclusive to iPhones. I tested with an android device and it worked fine when I tried viewing the page on two different iPhones it broke on both.
This issue is mobile related, since when I shrink my browser window to the size of a mobile screen, everything looks fine. However, when I view the site on my actual mobile device, the drop shadow "breaks" at seemingly random places. If I zoom in and out these breaks will change their locations.
The current effect being used is
filter: drop-shadow(20px 10px 4px #707070);
After further research into this, I found that the issue was not specific to my website. If you go onto the Mozilla MDN Docs on a recent iPhone device, you'll notice that it gives you the exact same effect when zoomed in. I'm going to post this as an issue on Github as suggested in the docs. Here is what my mobile phone showed when viewing the Firefox Logo drop shadow effect.
As suggested in a comment, changing to a simple box-shadow fixed the issue, although the edges are more hard-lined and slightly less faded (using the same parameters). It's not enough to break this specific project and I know there are CSS features available that enhance this, so all is good!
I am building a website but the responsive CSS is not applied on mobile as I would want it to be. I would like my site to be displayed like so (checked by Chrome dev tools):
However, when my site is deployed in production, the site's layout is completely different and it differs between Chrome, Safari and SNS browsers.
For Chrome
For Safari
For SNS browsers (FB Messenger in this case. Slide is different but the styling is practically the same for all)
I've had many problems like this where the design I applied to in Chrome Dev Tools is not applied in real life, and everytime these kind of things happen and so far I just use navigator.useragent to detect the browser type and apply specific css for each type of browser, but I'm sure this is an overkill.
When this happens, is this usually because chrome dev tools is not accurate, or because my logic is weak? And are there any way to remotely inspect DOM elements on mobile (I'm using OSX) so that I can check what exactly is going on?
Thank you!
Each browser renders differently but I think you might have hidden root or body padding or margin I suggest you play with those either through * {} or body {}
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
I have a custom checkbox and a weird border appears around my checkbox SVGs. On the website web app, tablet, and Andriod devices it doesn't appear. Only on IOS, Has anyone come across this before and know of a fix. I have spend days looking for a fix, doing CSS hacks, googling and working with other dev's on the team and trying to find a way to inspect on mobile, but to my knowledge, not a possible thing to do on a mobile browser. Attached is the image.
I'm working on a responsive website with lots of CSS3 animations (keyframes).
As much as it works good in a desktop Chrome browser, the site is too heavy for mobile and crashing it's browser or even sometimes restart the device LOL.
I'm new to both responsive and CSS animations, and will like to get your help to optimize the animations so they will work on mobile devices without crashing them.
I already changed all my animations (keyframes) from using position top/left to transform translate3D.
And I also set the animation-play-state to "paused" by default, and changing it to "running" only when you get to the area of the element (when it's in viewport).
What more can I do please? or, do I can't do anything about that and should always pause the animations on mobile devices?
You welcome to answer me in general, or visit the site in the next link -
* DO NOT open it in a mobile, it may restart your device! *
Open it in latest Chrome or Firefox: http://goo.gl/BVsVH7
Again I'm new to both responsive and mobile, and I have no idea what I should and shouldn't do.
I think it is hard to make this work well on mobile devices today.
I ran your website on google pagespeed and there are plenty of stuff you can make better. Paste your url there and you'll get a bunch of tips for optimization.
Google PageSpeed Insights