Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Bug Reports
  3. backdrop blur on ios

backdrop blur on ios

Scheduled Pinned Locked Moved Bug Reports
10 Posts 3 Posters 246 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Q Offline
    Q Offline
    quirin
    wrote on last edited by
    #1

    Hi Armin

    the mobile backdrop blur is not working for me on IOS. any way to fix it?

    this is how it looks like in chrome/android:
    09e8ff5c-0837-4bd6-aa5b-bc1d0510e178-image.png

    this is on ios:
    93234994-ab33-4cff-a259-4b40d3a24f24-image.png

    these are the settings from the lay theme mobile menu(blur 20px):
    2c2a159e-2789-4462-80e6-0245ec1f534f-image.png

    site url: sqk.at

    1 Reply Last reply
    0
    • B Offline
      B Offline
      brinifein
      wrote on last edited by
      #2

      I had a similar question two years ago
      http://laythemeforum.com:4567/topic/6198/backdrop-blur-mobile-nav-for-safari/3?_=1685110042396

      (I'm only here to possibly be notified if someone knows an answer).

      Q 1 Reply Last reply
      0
      • B brinifein

        I had a similar question two years ago
        http://laythemeforum.com:4567/topic/6198/backdrop-blur-mobile-nav-for-safari/3?_=1685110042396

        (I'm only here to possibly be notified if someone knows an answer).

        Q Offline
        Q Offline
        quirin
        wrote on last edited by
        #3

        @brinifein

        well, it should work with -webkit-

        nav.mobile-nav {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        }

        according to:

        5e4de176-846a-4284-a916-b4a442442737-image.png

        but something is still funny with the backdrop blur in lay, as i need to set the backdrop blur amount for the menu bar to 20px and the for the submenu to 10px to achieve the same visual blur amount.

        i'll keep trying...

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          do u have a link?

          Q 1 Reply Last reply
          0
          • arminunruhA Offline
            arminunruhA Offline
            arminunruh
            Global Moderator
            wrote on last edited by
            #5

            Screenshot 2023-05-30 at 18.26.43.png

            in my code i do use the webkit prefix

            1 Reply Last reply
            0
            • arminunruhA arminunruh

              do u have a link?

              Q Offline
              Q Offline
              quirin
              wrote on last edited by
              #6

              @arminunruh

              hi armin

              this is the link:
              sqk.at

              i used browserstack and several phones of friends to check crosscompatibility and as far as i could see, it works pretty much everywhere, except on iphone ios or chrome!?
              i know u are using the right code and i also tried again with custom css just to make sure. maybe the problem is not on your side...

              and also just to make sure: the problem for me is not the .navbar but the nav.mobile-nav

              1 Reply Last reply
              0
              • arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by
                #7

                can u remove your mobile custom css:

                    nav.mobile-nav {
                        -webkit-backdrop-filter: blur(10px);
                        backdrop-filter: blur(10px);
                    }
                

                then see if it works

                1 Reply Last reply
                0
                • arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #8

                  mh

                  maybe go to customize

                  mobile

                  mobile menu

                  and choose mobile menu style 2

                  Q 1 Reply Last reply
                  0
                  • arminunruhA arminunruh

                    mh

                    maybe go to customize

                    mobile

                    mobile menu

                    and choose mobile menu style 2

                    Q Offline
                    Q Offline
                    quirin
                    wrote on last edited by
                    #9

                    @arminunruh

                    thx - style 2 works! i will stay with this for now.

                    style 3 still doesn't also without the custom css

                    1 Reply Last reply
                    0
                    • arminunruhA Offline
                      arminunruhA Offline
                      arminunruh
                      Global Moderator
                      wrote on last edited by
                      #10

                      i think ios safari doesn't compute the value correctly because the transition is from height:0 to height:100%. and the initial state is height: 0;
                      i think this is a ios safari bug.

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      A
                      alasdair17
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search