Tell me, pzhl., The solution of such a problem on the safari version for desktop filesystem: 11.0.1, and iPhone7: when you click on the button, using the usual jquery code, a popup with background opens on: after-e. - When the scroll is first moved, the backgrind becomes invisible and the text in the modal window is also invisible, the popup itself with the white background is seen as an empty white field - all invisible elements are in their places, but they are "invisible"! - on subsequent attempts to scroll the screen (sometimes I scroll up to the stop, sometimes with just the next scrolling event) - everything is displayed: both the background and the text of the pop-up and no longer “disappear”, but this is repeated with all subsequent “discoveries” of the pop-up. If in the inspector I touch any element in an attempt to change the style, everything is immediately displayed on the screen in working condition: i.e. and background and text in popapa. (There is a vertical scroll inside the popup) The problem is that when the first scroll event occurs, the background on: after-e (position: fixed) and the text in the popup (popup also on position: fixed) but the popup with the white background and with invisible text visible (. Code for opening / closing popup: `

$(".open-desc").click(function(){ $('.product-description-tab-content-mob, .close-desc').show('300'); $('body').css('overflow', 'hidden !important'); }); $(".close-desc").click(function(){ $(this).hide('300'); $('.product-description-tab-content-mob').hide('300'); $('body').css('overflow', 'unset'); }); 

Бэкграунд:

 .product-description-tab-content-mob:after { position: fixed; left: 0; top: 0; width: 100%; height: 120%; background: rgba(0, 0, 0, 0.75); } 

Попап:

 .product-description-tab-content-mob { display: none; position: fixed; left: 5%; top: 15%; width: 90%; height: 75%; background: #fff; z-index: 160000001; padding: 0; } 

`

  • To open / close the popup: $(".open-desc").click(function(){ $('.product-description-tab-content-mob, .close-desc').show('300'); }); $(".close-desc").click(function(){ $(this).hide('300'); $('.product-description-tab-content-mob').hide('300'); }); $(".open-desc").click(function(){ $('.product-description-tab-content-mob, .close-desc').show('300'); }); $(".close-desc").click(function(){ $(this).hide('300'); $('.product-description-tab-content-mob').hide('300'); }); Background popup: .product-description-tab-content-mob:after { position: fixed; left: 0; top: 0; width: 100%; height: 120%; background: rgba(0, 0, 0, 0.75); } .product-description-tab-content-mob:after { position: fixed; left: 0; top: 0; width: 100%; height: 120%; background: rgba(0, 0, 0, 0.75); } .product-description-tab-content-mob:after { position: fixed; left: 0; top: 0; width: 100%; height: 120%; background: rgba(0, 0, 0, 0.75); } - Vladislav Kuraev
  • The popup itself: .product-description-tab-content-mob { display: none; position: fixed; left: 5%; top: 15%; width: 90%; height: 75%; background: #fff; z-index: 160000001; padding: 0; } .product-description-tab-content-mob { display: none; position: fixed; left: 5%; top: 15%; width: 90%; height: 75%; background: #fff; z-index: 160000001; padding: 0; } .product-description-tab-content-mob { display: none; position: fixed; left: 5%; top: 15%; width: 90%; height: 75%; background: #fff; z-index: 160000001; padding: 0; } - Vladislav Kuraev
  • press the edit button, in the editor press the code snippet button, paste the code there - kizoso
  • the code should be understandable and reproducible - kizoso

1 answer 1

Safari reacts poorly to pseudo-elements (after, before), in my case I had to redo the background and leave from: after.