1

at the moment i had to fix the scroll behavior on different browsers on my WP site.. works fine now for FF, Safari and Chrome.

The thing now is, that im not able to target specially the new edge browser (chromium).

here the menu with the anchor:

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-1400"><a href="https://ferevuti.myhostpoint.ch/schneideroptik/brillen/#korrekturfassungen" aria-current="page" class="elementor-sub-item elementor-item-anchor elementor-item-active">Korrekturbrillen</a></li>

and here the section where the anchor leads to:

<section class="elementor-section elementor-top-section elementor-element elementor-element-589117b elementor-reverse-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="589117b" data-element_type="section" id="korrekturfassungen">

section css simple:

.elementor-187 .elementor-element.elementor-element-589117b {
padding: 50px 0 0;

}

and the CSS im using on the page to fix the anchor scroll on all borwsers except edge canavary

/* Anweisung für Fü FireFox  */
@-moz-document url-prefix() {
  section
  {
      scroll-margin-top: 12rem !important ;
          padding-top: 50px !important;
}
    
}

/* Anweisung für Chrome  */
  section
 {
      scroll-margin-top: 4rem;
     
    }

  
/* Anweisung für Safari  */

@supports (background: -webkit-canvas(squares)) {
  section {
  margin-top: -6em !imporatnt;
  padding-top: 4em !important;
  }
}

if it helps here the page https://ferevuti.myhostpoint.ch/schneideroptik/brillen/

unfotunately scroll-margin-top behavior / position is different on Edge if i click on an anchor link then in chrome.

I tried to use

@supports (-ms-ime-align:auto) {
  section
 {
     scroll-margin-top: 10rem;
     
}
  
}

but this is for the older browsers.

Is there a workaround to use scroll-margin-top for edge or target edge chromium directly?

Gio Gmz
  • 31
  • 5
  • Please could you put up a snippet which shows the problem? see [link]https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Mar 13 '21 at 15:34
  • If possible, I suggest you post a code example that can help us to reproduce the issue. It can help us to understand the issue properly. We have some CSS code that can target the Chromium browsers but there is no code to specifically target the Edge Chromium browser. If you are available to use JS code to identify the Edge browser then I suggest you refer to this [answer](https://stackoverflow.com/a/60199162/10309381). Further, you can try to inject CSS to specific browsers using JS. – Deepak-MSFT Mar 15 '21 at 02:31
  • hey i updated the post - hope you guys can help. – Gio Gmz Mar 15 '21 at 13:27
  • I try to check the issue on your [site](https://ferevuti.myhostpoint.ch/schneideroptik/brillen/) and found that the issue also can be produced with the Google Chrome browser. so it can be possible that you will get the same result in all Chromium browsers. The thing to noticed here is that the issue can only produce while selecting any menu option for the first time. The issue can't be produced if we select the first option. From the second time, everything works properly. Can you please tell us in which CSS file you added your custom code? – Deepak-MSFT Mar 16 '21 at 06:03
  • Hey @Deepak-MSFT thanks for the reply here is the custom CSS I use for the sticky header: `selector.elementor-sticky--effects >.elementor-container{ height: 50px !important; padding: 0px 15px 0px 15px !important; } selector > .elementor-container{ transition: min-height .3s ease !important; } .elementor-sticky--effects .sticky-logo img { width: 190px!important; } .sticky-logo img { transition: .1s all ease-in-out; }` The custom code for the navigation is already postet above – Gio Gmz Mar 16 '21 at 16:41
  • @Deepak-MSFT - oh and since i use a website builder (elementor) i added the custom code on the specific element, so not in the general overall one – Gio Gmz Mar 16 '21 at 16:49
  • If you remove your custom code, does the issue occurs with the Google Chrome and MS Edge browsers? I suggest you check the result on your side with both of the browsers and if you see the issue in both browsers then the issue may be in the Chromium browser engine. In that case, you can create a new issue [here](https://bugs.chromium.org/p/chromium/issues/list). – Deepak-MSFT Mar 19 '21 at 05:12

0 Answers0