Фиксированный фон для iOS

background-attachment:fixed still not supported?

You’re now watching this thread. If you’ve opted in to email or web notifications, you’ll be notified when there’s activity. Click again to stop watching or visit your profile to manage watched threads and notifications.

You’ve stopped watching this thread and will no longer receive emails or web notifications when there’s activity. Click again to start watching.

Every now and then I need to make a website. And I noted in my last project that

background-attachment:fixed;

is still not supported by iOS. It is by Safari on MacBooks, so I’m wondering what the story behind it is? Surely it is not a matter of computational cost due to the so-called repainting of the browser’s canvas? Because doesn’t playing video cost a multitude of that?

Apple is just plain stupid regarding web development, it’s a ******* stone in front of the progress lol. I will never buy any of their products again.

Replies

Nobody? Not even someone from Apple? Do Apple people participate in this forum at all?

I’m not shure but i read in ohter sites, the reazon why isn’t work is because apparently it costs a lot to mobile browsers, so it’s been disabled.

I also stumbled across that today. Even on latest iOS as of today (14.1) background-attachment:fixed; still does not work.
And computational cost is for sure not an issue any more. Hey, isn’t marketing the iPhone 12 Pro is faster than most desktop PCs?
This is just a tech dept from first iPhone generations and should get fixed asap, Apple!

As of 2021 with the 14X ready to release with similar power to M1, this is still an issue. Apple, please fix this.

Why do iphones cost the earth if they can’t even support CSS from 10 years ago?

so iPhone 12 can render AR but not an image in the background 😀

Come on APPLE! We’re building stuff here with animations that require this. Just enable it already so we can use it and build awesome stuff.

Just need to simply attach a non-scrolling background and have knockout svg scroll over the top of it. Shocked that it’s not working because Apple is not supporting it. This feels like the old days with IE.

I have just came across this issue while I was creating a landing page for my project. Kept scratching my head on why my iPhone couldn’t render fixed background attachment while my Android phone could.

Turns out Apple does not support this feature.

Another voice from Poland. We also need this primary css style: fixed background image. I thought that IE6 was poor in css. Today the winner is iPhone’s browser. So disappointed.

This is ABSURD! So, now I have to go an edit my mobile settings for a background that will display properly on Apple devices, and lose a significant level of my design impact, even tho it displays fine on other devices. shameful! For the amount of $$$ we pay for these phones and the extent of the development behind all their boasted performance, this is pathetic. Total amateur hour! APPLE — please get with the program on this.

Hey, I’m having this issue as well. The most perplexing part to me, is that it works on one of my apps, and not another.

fixed bg attachment works on mobile (iphone 13pro) here: https://blog-next-js-sigma.vercel.app/

yet it does not work for another app i’m working on. I’m a fairly new developer and I built that by following this tutorial: https://www.youtube.com/watch?v=HYv55DhgTuA&ab_channel=JavaScriptMastery

i definitely slowed it down by adding a backdrop blur to all my translucent components. but bg attachment fixed works. there is a link to the tutorial github on their youtube page

Источник

Фиксированный фон на iOS

Свойство background-attachment: fixed несколько некорректно отображается на мобильных устройствах Apple. Но кроссбраузерное решение есть всегда!

Раз фон нормально не фиксируется, то блоки фиксируются точно. Именно на этом принципе основано следующее решение:

     body, html < position: absolute; width: 100%; height: auto; margin: 0px; padding: 0px; top: 0; left: 0; min-height: 100%; >.fixed-crossbrowser-background 

Пожалуй, это самый приемлемый и рациональный вариант из тех, что мне приходилось применять для решения этой проблемы. Обошлось даже без javascript.

Если есть что добавить по теме backgroud-fixed на iOS или как зафиксировать фон для iphone и ipad, или возникли вопросы — форма для отправки комментария внизу.

• Георгий 27.07.2016 в 18:03 КРАСАВА, выручил, ковырял 3 дня, спасибо огромное.
• Yury 03.12.2016 в 19:09 А как это применить в WordPress? Спасибо
  • Дмитрий Ильичев 04.12.2016 в 14:06 Прописать стили в файле темы
    /wp-content/themes/ваша_тема/style.css
    и добавить блок, который будет выполнять функции фона в
    /wp-content/themes/ваша_тема/header.php
    • Yury 04.12.2016 в 14:14 Прошу прощения, а не могли бы вы подсказать, что именно прописывать?? Сам код стилей и блока. А то боюсь напортачить. Огромное вам спасибо.
      • Дмитрий Ильичев 04.12.2016 в 14:39 Напишите пожалуйста на info@dmitriyilichev.com, или свяжитесь со мной в социальной сети, в частном порядке посмотрим Ваш случай.

      Добавить комментарий Отменить ответ

      Другие статьи в этой рубрике

      Довольно актуальная тема как для веб-мастера, так и для верстальщика, или даже контент-менеджера.

      Весьма редко разработчики сайтов прибегают к подобным вещам. Просто маленькая мелочь, но как известно из мелочей складывается общее впечатление.

      Вроде бы такая мелочь, что и особо рассказывать нечего, но все таки есть вопросы по этой теме. Раскрываем тему.

      Довольно популярная тема о том, как сделать подобную кнопку. Плавность нужна скорее не для красоты, а для того, чтобы для посетителя сайта не было неожиданностью то место, где он после нажатия кнопки окажется.

      Хотите набрать побольше баллов в Google Page Speed? Не знаете что такое «сборка front-end»? Тогда вам сюда, будет интересно.

      Источник

      The Fixed Background Attachment Hack

      What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries. Or get around it with a small fix. I suppose we could call it a “hack” since it’s a workaround in code that arguably we shouldn’t have to do at all.

      I want to keep the background gradient in a fixed position on scroll, so let’s apply basic CSS styling to the body that does exactly that:

      Here are the results in Chrome and Firefox, both on Android, respectively:

      

      

      Is there a downside? Perhaps! We’re using a general instead of an actual tag, so I wouldn’t say the markup is semantic. And that can lead to accessibility issues. If you’re working with an image that adds meaning or context to the content, then an is the correct way to go, utilizing a proper alt description for screen readers.

      But if we go the proper route, then we’re right back where we started. Also, if you have a navigation bar at the bottom which too auto hides itself, then I can’t help it. If the hack won’t cut it, then perhaps JavaScript can come to the rescue.

      Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

      Comments

      This should arguably not be affected by other styles you used; the exception being ‘position: fixed’ – never use that on the root element. In this way you’re left free to use the other background related styles on body, even in shorthand. Note that I have not tested this. Happy hacking!

      I meant to write ‘other styles’ and not ‘other background-related styles’ in my previous reply. Naturally, all ‘background-related’ styles should be on the same element. I need coffee. Cheers.

      A method I’ve used that seems to behave on desktop and mobile, is to apply a background-image to a pseudo-element, sized to match the content, like so:

      This also works with ::after . The only drawback I’ve found is it takes up one pseudo-element. If that is a problem, because you need that particular pseudo-element for another purpose, then just use a nested element with similar CSS as for using a pseudo-element. If there are other methods out there that also do the trick, I’d love to know about them.

      Thanks for the idea, I attempted to put it into practice but using position fixed seems to want to use the root as a container even when the direct parent has position relative

      Источник

      background-attachment

      The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block.

      Try it

      Syntax

      /* Keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* Global values */ background-attachment: inherit; background-attachment: initial; background-attachment: revert; background-attachment: revert-layer; background-attachment: unset;

      The background-attachment property is specified as one of the keyword values from the list below.

      Values

      The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element. (This is not compatible with background-clip: text .)

      The background is fixed relative to the element’s contents. If the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

      The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.)

      Formal definition

      Initial value	scroll
      Applies to	all elements. It also applies to ::first-letter and ::first-line .
      Inherited	no
      Computed value	as specified
      Animation type	discrete

      Formal syntax

      background-attachment = # = scroll | fixed | local 

      Examples

      Simple example

      HTML

      p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. /p> 

      CSS

      p < background-image: url("starsolid.gif"); background-attachment: fixed; >

      Result

      Multiple background images

      This property supports multiple background images. You can specify a different for each background, separated by commas. Each image is matched with the corresponding type, from first specified to last.

      HTML

       
      There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!
       

      CSS

      p < background-image: url("starsolid.gif"), url("startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; >

      Источник