CSS workaround for iPhone responsive design bug - javascript

I've created a new page for our social club and have some problems with it. It's a responsive site with one-page design. On the intro section, there's just a background image with a simple logo.
Now everything looks good on android and most pc browsers, but somehow the iphone browser shows the background image zoomed.
Does somebody know an workaround for that?
You can try it yourself on http://juku-tbg.de/
Chrome Screenshot: -> OK
Iphone Mode on Chrome: -> OK
Screenshot from android device: -> OK
Screenshot on an iphone 5s: -> NOK
Thanks a lot.

background-attachment: fixed is bugged in mobile Safari. For a fix use a seperate container and apply position: fixed to it instead.
#bg {
background-image: url('path/to/img.jpg');
background-attachment: scroll;
background-position: center top;
background-repeat: no-repeat;
display: block;
width: 100%;
min-height: 100%;
z-index: -100;
position: fixed;
top: 0;
left: 0;
}

Related

How to do animated buttons on AirConsole controller?

We use animated GIF buttons on our controls and it was working fine until we got to wider user testing where some users had iPhones (not Androids that all had previously). They were using the AirConsole app to control in case that's relevant. The animated GIFs don't seem to animate there. Obviously we're looking for an answer that works on all AirConsole's supported platforms. (Animated GIFs seemed like a lowest common denominator type answer!)
Any ideas / help? Do we need to do something specific or encode a particular way?
Otherwise (if it isn't supported), I guess we'll have to see if we can detect controller platform (browser info in JS?) and provide an alternative. (I'd guess probably JS swapping image frames. Otherwise entirely back to the drawing board :( ) Please suggest those alternatives if you know them!
We're writing the HTML and JavaScript by hand (not using a generator). Here are what I hope are all the appropriate bits.
.main-button{
position: absolute;
top: 35%;
width: 18%;
height: 30%;
background-size: contain;
background-repeat: no-repeat;
}
#interact-button{
background-image: url("Buttons/AnimatedButton-PickUpPutDown01.gif");
left: 30%;
top:25%;
}
<div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>
Here's an example GIF we're using. Let me know if there's anything else that might help and thanks in advance!
I tried showing the GIF on an old iPhone (Running iOS 10.3.3) in the AirConsole App, Chrome and Safari browsers (Using the AirConsole Simulator).
They all seem to show the animated GIF as expected:
Here is the code I used in controller.html:
<html>
<head>
<script src='https://www.airconsole.com/api/airconsole-1.7.0.js'></script>
<script>
let airconsole;
/**
* Sets up the communication to the screen.
*/
function init() {
airconsole = new AirConsole({'orientation': 'portrait'});
}
</script>
<style type='text/css'>
.main-button{
position: absolute;
top: 35%;
width: 18%;
height: 30%;
background-size: contain;
background-repeat: no-repeat;
}
#interact-button{
background-image: url("Images/support/AnimatedButton-PickUpPutDown01.gif");
left: 30%;
top:25%;
}
</style>
</head>
<body onload='init()'>
<div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>
</body>
</html>
What version of iOS are you having the issue on? I suggest that you try the basic controller code I show to see if it changes anything.

background-attachment: fixed is not working on mobile devices

I am building a personal site . But I have a big problem ,background-attachment: fixed is not working on mobile devices . I have 4 sections, with bg fixed, + javascript effect .
The last section is very important ...
Can someone help me please to fix these probleme ? I will realy apreciate .
The site is here : my site
.hello
background-image: url("../img/hello.jpg")
background-repeat: no-repeat
background-size: cover
background-position: center
background-attachment: fixed
height: 100vh
min-height: 600px
display: flex
flex-direction: column
justify-content: center
align-item: center
text-align: center
// Sorry for my bad english ,
It's unsupported on mobile unfortunately...browsers have to completely re-render the image each time you scroll and in the past it was too much of a performance hit, although it does look like support for it is starting to trickle out https://css-tricks.com/almanac/properties/b/background-attachment/. The only way to get a comparable effect at the moment is to have your backgrounds as separate elements with position: fixed, like...
.background{
position: fixed;
background-image: url(image source);
top: 0;
left: 0;
width: 100%;
height: 100%:
z-index: 0;
}
and everything that scrolls over it should have either position: relative or position: absolute with a z-index higher than 0.

Mobile - body:before background image briefly breaks when scrolling

When I scroll on my website there is a white bar at the bottom of my background image. The image is attached to body:before {}. I have tried a variation of CSS settings and tricks to circumvent this but I can't seem to get around it. I even tried having the image overflow 110vh to prevent the white-space but that also failed.
Example of the issue below. Perhaps this is strictly iOS related? I am using iOS 10 and I have tried both Chrome and Safari and the issue persists on both.
Here is my website:
Here is my CSS:
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
min-width: 100vw;
min-height: 110vh;
z-index: -10;
background: url(../css/images/brotherhoodSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Any suggestions for this one? I've already had to use this crazy body:before workaround because background-attachment:fixed doesn't work well on iOS mobile devices.
Thanks

Latest Version of Chrome Broke fix background?

i am using stellar.js and also am using background-attachment: fixed. However, that scrolling effect which was produced suddenly stopped working in Google Chrome. Here's a link to the
site.
When i try to preview my website in version 45.0.2454.85 m background attachment wont work to any of my background pictures. However it works in firefox, edge and others. When i tried a version below 45 it also worked just fine.
here's how i typically create my background images
CSS
.intro {
background-image: url(/img/banner-bg.jpg);
background-repeat: no-repeat;
height: 100%;
background-attachment: cover;
background-position: center center;
background-size: contain;
}
HTML
<section class="intro" data-stellar-background-ratio="0.5"> </section>
It seems that to make it work for this version i had to take out the overflow-x:hidden property from:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Otherwise my images won't stay fixed at this Chrome Version for a reason i don't know.

Center website background on the screen?

I've seen this trick on many websites and I want to make it for a project of my own.
I have an image background.jpg that is VERY BIG, just to be ready for any screen size.
I wish to center the background image to the visitor's window.
I mean, while scrolling the window content will move but the background will stay in place - centered vertically and horizontally.
BTW most of the viewers will have old crappy PC's so it'd better not flicker, if it'll be JS.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
put your image on the body background:
body{ background-image:url('your/image/url'); }
and put a div within the body:
<body><div class="div-body">{your site's contents}</div></body>
and create a css selector like this:
.div-body{
overflow:scroll;
width: 100%;
height: 100%;
display: block;
float: left;
}
try what is in this fiddle: http://jsfiddle.net/maniator/3RRYe/3/ demo
see if that works for ya ^_^

Categories

Resources