Tonyt8 commented 5 years ago

Support

Hello, Has any one had the below issue? Can any one help me out with this?

I am not able to view a Typo3 9.5.1 website with the official introduction package on a ipad gen 3 running ios 9.3.5 using Safari. I have made 2 fresh/clean installed test websites at different locations. I have only installed the "The official Introduction Package"(4.0.1 (02.10.2018) ) - bootstrap_package 10.0.1-10.0.99 Both websites act as if the CSS is not loading when viewed on the ipad. All other devices correctly display the 2 websites as expected.

Many thanks. Regards, Tony

Is your question related to a problem? Please describe.

benjaminkott commented 5 years ago

Hey, currently no idea - tested only on more modern devices - can you provide some screenshots?

jokumer commented 5 years ago

This is iOS 9.3 related. I tried with Safari, Chrome, Opera Bootstrap4 supports the latest, stable releases of all major browsers and platforms. iOS 9.3.5 (2016) and 10.3.3 (2017) are no longer maintained versions.

bootstrap-package.com top bootstrap-package.com bottom

Tonyt8 commented 5 years ago

Hi,

Thank you for your replies. I need to apologize, I overlooked something in the basic setup. I should have know better. I now have the test websites displaying correctly on a ipad gen 3. I forgot to install the "static template" "Bootstrap Package: Bootstrap 3.x (Less) (bootstrap_package)" to the website root template. With the extra static template added the website is view able on an ipad gen3.

Regards, Tony

philippmaurer commented 5 years ago

Hi,

We have the same Issue with an iPad Air 2 running iOS 10.2.1 and an iPad 2 that runs iOS 9.3.5. The bug is not present on an iPad 3 runnding iOS 11.2.6.

The bug is not only present on our website (www.roberta-home.de) since switching to bootstrap_package 10, but also on the current official Typo3 Bootstrap Package website (www.bootstrap-package.com). The issue is equivalent to the screenshot that was already commented above from jokumer.

I located the problem to be in the following CSS code in the (generated) CSS file /typo3temp/assets/bootstrappackage/css/theme-{hash}.css :

@supports (position: sticky) {
  position:sticky;
  top:0;
  z-index:1020;
}

The correct code for this seems to be shown in EXT:/bootstrap_package/Resources/Public/Css/bootstrap4-theme.min.css:

@supports (position:sticky){
  .sticky-top{
    position:sticky;
    top:0;
    z-index:1020
  }
}

Somehow the .sticky-top{} part is not generated correctly, which results in the incorrect css syntax that stops the iOS Safari 9/10 version from interpreting the CSS any further. Therefore this might be present on other devices / browser engines as well.

The SCSS file containing the code in question is EXT:bootstrap_package/Resources/Public/Contrib/bootstrap4/scss/utilities/_position.scss.

Rearranging the code from SCSS:

.sticky-top {
  @supports (position: sticky) {
    position: sticky;
    top: 0;
    z-index: $zindex-sticky;
  }
}

to CSS:

@supports (position: sticky) {
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: $zindex-sticky;
  }
}

fixes the issue. Yet i guess the correct solution would be to fix the SCSS transpiler for it to handle @support clauses.

If any other information is required please let me know.

Best regards and thanks for the awesome project, Philipp

benjaminkott commented 1 year ago

legacy css incompatibility

benjaminkott / bootstrap_package

ipad gen 3 is displaying incorrectly Typo3 9.5.1 website using the official introduction package #613

Support