-
Posts
-
Button or scroll down arrow doesn’t work in iOS safari, chrome and android chrome firefox etc with fixed background
The first section doesn’t work but the bottom section does in the below page (Both backgrounds are fixed)
You’d better check it out in mobile device!
Hey James!
Thank you for using Enfold.
I checked the site and the scroll down arrows are disabled even on desktop view. Please create a test page so that we can check it.
If you noticed the background not fixed on mobile devices, unfortunately, that is the default behavior of the color section background on mobile devices. The background fixed property is not supported by all browser specially mobile browsers. The parallax effect is disabled because the css translate property that is responsible for the parallax effect is still also partially supported on mobile browsers. These are the known issues on mobile devices regarding these properties:
1.) iOS has an issue preventing background-position: fixed from being used with background-size: cover.
2.) Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it.Cheers!
IsmaelI know what you are saying.
I want you to check out the link button “미오자세히” of the first section that doesn’t work on background fixed with mobile device. But the funny thing is that “터빈 자세히” button of second section works on the same background setting with mobile device.
Hi,
Sorry for the late reply, could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.
Thanks,
RikardBy the way, duplicated color section with background image fixed to apply different color overlay is awesome in desktop (you can check out at http://apsunfit.cafe24.com with the first and second section) However, in mobile devices, those are not what I want. Any idea to recommend in mobile?
Hi,
I’m not sure if you changed anything but both scroll down links work on my end now using iphone4/chrome?
Best regards,
Rikardiphone 5s both chrome and safari don’t work. I am not sure if the issue has something to do with OS. My iPhone have been with iOS9 public beta!
Hi,
Ok, that could be the problem, I’ll ask the team to take a look at it on iphone5 since I don’t have one myself. Please wait for their answer.
Best regards,
Rikard
let me show you images to explain what problems are. As you can see, the buttons in the website don’t work at all on background Fixed with Safari and chrome in iOS let alone chrome and default other browsers in android (I checked yesterday). No problem at all on background Scroll. I gave it a try with Parallax, guess what? doesn’t work at all! Things are only fine with Scroll
The more serious problem in mobile firefox is that layouts are broken with background fixed!
I give you “http://breathing.theturbine.com/” This website has been built with background fixed and I checked it out with all browsers and No problems came up! Plus, the background image is getting smaller depending on the mobile window size but your theme isn’t. That is what I really want
Hope you guys figure out what I saying!
Hi!
Please try adding following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 480px) { #mio .avia-button-wrap { z-index: 999; }}Best regards,
YigitThanks @Yigit for prompt reply
didn’t work at all! >,.<
Hi!
not sure what you mean. I checked your button and I deleted it and recreated it in your backend and now it’s working. Background image from the page you have provided and from your own page are behaving pretty much the same for me. However you can control it using media queries.
Regards,
AndyFor a long effort, finally I figured out what the problem is!
You’d better change
.avia_mobile #top .av-parallax { position: fixed; }
to
.avia_mobile #top .av-parallax { position: absolute !important; }
Yes, it did @Ismael
- You must be logged in to reply to this topic.