mobile sticky header broken (apple ios <= 14.4)

  • Resolved l3l3

    (@l3l3)


    2 years, 11 months ago

    you are using the css property: ?inset-inline-start“ and ?inset-inline-end“ on <div data-sticky=”yes:shrink”> this isn’t supported by a huge amount of ios users (ios <= 14.4)!
    So the layout is broken for this users! Please use ?left“ and ?right“ instead!

    
[data-sticky*='yes'], [data-sticky*='fixed'] {
  position: fixed;
  z-index: 5;
  top: calc(var(--admin-bar, 0px) + var(--frame-size, 0px));
  /*inset-inline-start: var(--frame-size, 0px);*/
  /*inset-inline-end: calc(var(--frame-size, 0px) + var(--scrollbar-width, 0px));*/
  left: var(--frame-size, 0px);
  right: calc(var(--frame-size, 0px) + var(--scrollbar-width, 0px));
}

    thx

    • This topic was modified 2 years, 11 months ago by l3l3.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter l3l3

    (@l3l3)

    same here:

    
[class * ="ct-toggle-close"] {
    top: var(--toggle-button-top, initial);
    /*inset-inline-end: var(--toggle-button-inset-end, 0);*/
    /*---> use this: */
    right: var(--toggle-button-inset-end, 0);
    --icon-size: 12px;
    --icon-color: rgba(255, 255, 255, 0.7)
}

    and so on …

    aren’t you using a build tool which utilizes the browserlist??
    “last 4 versions” (~93% coverage) or “last 2 years”
    see browserslist dot dev

    • This reply was modified 2 years, 11 months ago by l3l3.
    Theme Author creativethemeshq

    (@creativethemeshq)

    Hi @l3l3,
    Yes, you are right about this, we will release soon a new update with an improvement.

    Thank you very much for the heads up!

    Theme Author creativethemeshq

    (@creativethemeshq)

    Hello @l3l3,
    You can check the latest theme and companion versions, everything should be fine now.

    Thank you one more time for reporting this issue!

    Thread Starter l3l3

    (@l3l3)

    @creativethemeshq thank you!!!

    Theme Author creativethemeshq

    (@creativethemeshq)

    With pleasure @l3l3.

    Let us know if you will have any other questions.

    Have a wonderful day ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘mobile sticky header broken (apple ios <= 14.4)’ is closed to new replies.