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.
Related
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?
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 using prestashop 1.6 with a custom theme. I have done some little changes here and there on the theme mostly just color and font on the css file. The mobile menu works perfectly on all android that I've tested but for some reasons, it does not work properly on some Apple devices. On an ipad 2 IOS 7.1.2, the menu background shows but the content does not. On an iphone 4 IOS 5.0.1, some of the content show, some don't. But then, it work great on an iphone 4 IOS 7.1.2.
I have no idea how to fix such problem as I have no clue what is going on. Has any one experience this problem or know the reason. Please help me out.
Here is the link to the site: www.halivu.com (it's not fully done, I have not finished with the content :D).
Thank you.
try to emulate the devices in Google Chrome.
All menu div tags are empty. Check your mobile settings in prestashop backend.
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
The left and right buttons for the slider and the small buttons below the slider doesn't work when clicked. only works in IE but not on Firefox and chrome.
Also the images gets out of place when I re-size the browser window to a mobile phone size or tablet size browser.
this is the website http://amakris.com
Thank you
I have been driving myself crazy trying to find an answer to this very problem and I think I just have. It would appear that for the last almost 8 months that Flexslider 2.0 has had a known problem with touch devices. Personally I have an AIO touchscreen and just proved what I found. If you have a touch enabled device and visit any website using flexslider, including Woo's demo - you will notice that by using the "touch" device the slider buttons and navigation work perfectly, but not if you use the mouse.
Apparently there is a touch enabled feature in Chrome which may or may not be able to be turned off or programmed off with a little bit of code. See here: https://github.com/woothemes/FlexSlider/issues/351
It would appear that since flexslider is touch enabled, Chrome and AIO desktops or other touch devices signal to Flexslider to turn off the manual navigation because it is not needed.
I for one am happy that I can stop driving myself crazy now. Enough time has been wasted thinking about this.
I hope anyone else that finds this can rest easy to.