3

I'm experiencing some strange behaviour when linking to page anchors inside a transform translated element.

When using Safari/Chrome/Opera, the anchors work as I expect, just moving down and keeping the translated element in the correct position.

Using Firefox/IE linking to the anchor moves the entire translated element.

I have setup a fiddle demonstrating this.

Markup (Amount of paragraphs removed for code)

<div id="container">
  <p><a href="#link-to-me">Link to page anchor</a></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut iaculis ante. Sed elementum mauris eu dui elementum adipiscing. Praesent cursus quis velit vel accumsan. Donec lacinia eu ipsum nec pulvinar. Donec sed diam at arcu gravida auctor. Duis eu lobortis elit. Cras consectetur neque vitae velit egestas, eget pulvinar nunc ornare. Morbi fermentum metus quis massa mollis lobortis. Nulla facilisi. Cras vestibulum pharetra justo, vel tincidunt urna aliquet id. Nulla feugiat, tellus id ultricies lobortis, nibh metus placerat magna, nec pellentesque arcu mauris quis ligula. Ut convallis tellus sed cursus porttitor. Donec a urna sed risus ornare ultricies.</p>

  <h2 id="link-to-me">Page Anchor</h2>
  <p>Integer sit amet placerat leo. Fusce posuere volutpat massa. Cras volutpat est justo, venenatis mattis odio vestibulum at. Ut egestas dignissim tempus. Curabitur augue nunc, interdum vel nunc a, venenatis ullamcorper elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque accumsan varius augue imperdiet pulvinar. Ut vitae mi purus. Fusce volutpat accumsan congue. Aliquam turpis nunc, hendrerit at accumsan at, viverra et nulla. Aliquam eleifend libero metus, porttitor blandit erat dictum nec. Proin nec arcu dapibus, aliquam mi quis, rhoncus tellus. Nunc ac sapien mauris. Nullam dolor turpis, aliquet in rutrum vel, pulvinar in ipsum.</p>
</div>

CSS

html {
  overflow-x: hidden;
}

body {
  background-color: black;
  overflow-x: hidden;
}

#container {
  -webkit-transform: translate(50%);
  transform: translate(50%);
  background-color: white;
  padding: 15px;
}

Is this an issue, or just a difference in browser behaviour? Could this be solved by using JS to scroll instead?

Thank you in advance for any help.

Adam

0

1 Answer 1

0

Use this properties also for ie and mozzila

css


    #container {
    -webkit-transform: translate(50%);
    -moz-transform: translate(50%);
    -ms-transform: translate(50%);
    -o-transform: translate(50%);
    transform: translate(50%);
    background-color: white;
    padding: 15px;
}

Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.

The CSS browser prefixes are:

Safari: -webkit- Chrome: -webkit- Firefox: -moz- Internet Explorer: -ms- iOS-android: -webkit- Opera: -o-

3
  • This doesn't answer my question I'm afraid. I'm not talking about browser prefixes at all.
    – Adam Smith
    Jul 1, 2014 at 10:45
  • but the issue you were talking about is because of browser prefixes thats why i have mentioned in footer of my answer! Jul 1, 2014 at 10:49
  • No because Firefox now supports transform without the -moz- prefix. I'm not talking about support for transform at all, my problem is about Firefox and IE changing the position of a translated element if you navigate to a page anchor.
    – Adam Smith
    Jul 1, 2014 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.