Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
I found a bug.
In the Background Setup of the Page Template, you can set the Background-position X to "top | center | bottom." It's the horizontal coordinate. It should be Left | Center | Right.
I noticed the invalid CSS while looking at another problem. Which leads me to what I think is another bug, but not sure if this is an iOS bug or if Backlight can work around it.
Normally the background image is fixed in its position and the album thumbs scroll over top the image.
I found on the iPhone scrolling a page is causing the background image to jump. Starting at the top it looks right. Then scrolling the nav off the top and stop, the background image moves. Sometimes it takes another touch. Scroll from the top to the middle should cause it to jump. Scroll from the top to the bottom and you should certainly see it.
I tried adding my own CSS to the body tag but then the iPhone seems to ignore the "fixed" attribute.
Searching the 'tubes I find this is a common complaint. Is this an iPhone bug?
Potential fixes (dated)
https://stackoverflow.com/questions/160 … und-on-ios
https://24b6.net/2012/12/17/ios-and-fixed-backgrounds
http://blog.dotlaunch.com/2015/04/fixed … oblem.html
--Jim
Offline
Thanks for catching that Background-position X error. I'll fix that for next release.
And yes, the background issue seems to be inherent to Mobile Safari, and an issue for which there is no good fix.
Maybe use media queries to disappear the background at mobile display sizes, or use Javascript to target the iOS Safari user agent and remove the background only for that browser.
Offline
Actually, I have just discovered that because the the somewhat unorthodox way that Backlight implements its backgrounds, we can actually achieve the intended behavior this way:
.background__image
{
background-attachment: scroll;
}And that allows us to avoid the iOS issue. Huzzah!
Offline
we can actually achieve the intended behavior this way
I've added {background-attachment: scroll} to my CSS. I haven't seen any bad side effects, but I'm still seeing the background jump. It happens while scrolling in portrait mode. It seems to be better (fixed?) while in landscape.
The behavior seems to be scrolling is causing the background image to be scaled wider. I'm guessing the viewport is getting changed causing the background to scale wider, making it look like the background has jumped.
Interesting to note that in the wider landscape mode it's not being re-scaled while scrolling. Seems to be linked to the narrow width of portrait mode.
I couldn't find how to monitor the viewport, which I suspect it getting changed during scrolling. I've spent too much time looking at this. I've found it's been an iOS bug forever, across every release from Apple. Makes me sad to see such an obvious glitch in Apple's visual design.
--Jim
Offline
This is the CSS code I use to set my background image and it seems to scroll just fine on iOS? Maybe I'm missing something.
/* background image */
html,
body,
main,
footer
{
background-color: transparent;
background-attachment: scroll;
background-image: url(/backlight/custom/images/TopoBackgroundsmaller.jpg);
background-position: center top;
background-size: 1280px;
background-repeat: repeat-y;
}
Charlie
www.stalkinglight.com
Offline
It seems to be better (fixed?) while in landscape.
Nope, still happens. It's happening less often but not fixed.
It's obvious when it happens because the top of my background image is more light than the bottom. When the scaling bug happens, the background jumps from light to dark when scrolling down, and then dark to light when scrolling up.
BTW - because my background image isn't uniform, I can't use repeat to create a tile effect.
That said, I just realized I can make it less obvious by having a similar brightness across the entire image. The subtle randomness of the background will mostly go unnoticed when it moves, but at least it wrong jump up and down in brightness.
--Jim
Offline
Charlie, are you using pure css to place the background or are you using that code in conjunction with Backlight's background image feature?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Pure CSS. For some reason I was seeing a 'blink' when switching from page to page using BL and this seems to have minimized it. I did this a few versions back, though, so things may have changed in BL.
Charlie
www.stalkinglight.com
Offline
JimR,
The only "jump" I saw when I tested the change was when, in portrait mode, the browser's bottom toolbar popped in and out of existence, causing the document height to change.
Offline
The only "jump" I saw when I tested the change was when, in portrait mode, the browser's bottom toolbar popped in and out of existence, causing the document height to change.
I suspect it's got something to do with the size/aspect ratio of the image.
What was the pixel height and width of the image you used? I'd like to crop my image to that and try it.
--Jim
Offline
It was portrait orientation. I don't think it should matter, though.
Offline
Pages: 1