I know that this issue has been discussed before here but I tried every method and none of them worked. I'm trying to make a parallax effect with background-attachment: fixed. On every browser, on every OS is working perfectly except Chrome on Macbook Pro with Retina screen. Here is the website
The webpage isn't renders properly. The elements which have background-attachment: fixed are flickering or don't load at all. If you have Retina you can understand what i'm saying. Just open it in Chrome. For those who don't have retina just look at my screenshot. I'm desperate right now. I'm thinking of killing the functionality of this rule by targeting chrome on hDPI devices. Can i achieve this using jQuery maybe?
many sources of this specific issue
Related
I've tried various things to make it work, such as playsinline, various different implementations. The video I've tried in MP4 and HTML5, it's muted and plays as background video. It works fine everywhere but it doesnt work on the iphone, upon further investigation I tried it on safari on macbook and it doesn't play there either - thus making it a safari browser issue. I know for a fact that there is either a fix for this, just figured I'd ask here instead of guess and checking.
I tried to make a background video work on safari mobile & desktop browser.
Morning all,
I need assistance with iPhone viewport issues. I have sifted through all kinds of posts, all from 8+ years ago. Some had a similar issue, some had the exact issue. Seems none actually found a fix.
I have developed a site and cannot for the life of me work out why only on iPhone the viewport is cutting off the left of the content. The site works as expected on android, macbook and desktop. I do not have access to an iPad. All completely responsive. When I say "cut-off" I mean you cannot scroll to the left at all.
I tested on an iPhone 8 and thought, ok, it is a bit old, probably just limited to older phones but alas, when I checked with friends on an iPhone X and 11 pro they both had the same issue. It is not an issue in landscape, only portrait.
Please see below screenshots:
Iphone issue where you can see that the content is shifted to the left
Galaxy S10 where you can see the content is centered as expected
As you can see from the above, it is like the phones are readying the viewport size correctly but they are shifting the content to the left. The banner at the top is set to width: 100%; and yet it does not stretch to the far right.
Also, bizarrely it seems that the nav is happily centered but all other content is not.
I am at a loss.
This must be a common issue with an easy fix that just isn't asked, I hope. I have built this using purely CSS and HTML so nothing fancy.
Entire code can be found here in my previously unanswered post which had a little less detail.
link to the site
For anyone in the future looking into this or a similar issue, it seems that iPhone's have challenges interpreting tags. This is not limited to Safari as I tested the code on Opera and firefox on an iPhone 8 and iPhone X and the same issue occured.
Not only did the CSS applied to the tag not take effect on the iPhone but it created some form of break in the page entirely.
tags are a little outdated as I understand however it added a nice aesthetic. Instead I created the same visual effect by entirely removing the tag and using bottom-border on the SVG.
I hope this helps someone in the future.
I have a problem with one of my projects where I use TailwindCSS.
The page looks all right on Desktop, Tablet and some phones, but for some of them, the website has a horizontal scrollbar.
This problem is only happening on Google Chrome on iOS (iPhone 11 Pro).
On iPhone 5 everything looks fine; no horizontal scrollbar.
On Safari the website looks alright on all devices (mobile, tablet,
desktop).
I've done something wrong, because I can't figure out what's happened.
The problem can be found here
P.S.: I added overflow-x-hidden on body to prevent the scrollbar, but didn't work.
Thank you!
Ok, so i found the problem, is realated to aos.js library that i have loaded for animation on div's elements. On mobile the library creates a "side space", after i deleted the animation, everything looks ok.
Thank you!
My site is live at http://brand2o.com/. The site is responsive, and works fine at any size on every desktop browser I try and on my Android phone, but the problem is that on an iPad, the right side of the header gets cut off so it says "Licensing P" instead of "Licensing Portal."
I'm having trouble figuring out where the problem lies because I can't replicate it on desktop — Chrome's device mode actually shows it having too MUCH room on the right and the website not centering instead!
Any ideas?
Edit: Looking more closely, it looks like the iPad is giving each navigation item (they're flexbox children) equal width, and messing with flex-basis and flex-grow don't make any difference. I can't find anything about it but is this any kind of known bug? Again, it looks fine everywhere else, including desktop Safari.
Some of this issues are related to version of the OS and Safari also. What I do on this instances, if you connect your iPad to your MAC you will be able to inspect the HTML and CSS and figure the issue out.
Debug apple devices
Another site
Hope this help!
Regards
Figured it out: The lis were set to width: 100%; for when the navigation collapses, and I should have overwritten it in the media query for bigger screens. I added width: auto; and it's fixed!
I have a glaring CSS problem with my website on iphone even though it looks just fine in safari for mac and safari for ipad.
In the attached screens, notice the white background in the upper right corner is only present on the iphone (and it's not supposed to look that way).
What tools and or techniques would you use to try and isolate the cause of this rendering problem?
Here's the iPad version that's OK.
Here's the iPhone rendering of the same page with the extraneous white area in the upper right.
And for easy clicking.. the site is http://summertown.org/
tia!
-Darrell
My problem is solved. One of my super smart co-workers took pity on me and gave me the CSS fix. I'm not any smarter on HOW he figured this out... he said it was a trade secret.
Anyway, the solution was to add...
“min-width: 57.69em;”
to body css (summertown.css)