0

The amp-validator disallows using position: fixed in style sheets.

Is there another way to make a header that is attached to the top and does not scroll in an amp-conform way?

EDIT:

Full example:

<div style="background:red;position:fixed;right:-50px;padding-left:50px;padding-right:50px;transform:translateY(100%) rotate(45deg)">
    <h5>Text</h5>
</div>

Here is the error message I am getting:

[ warn ]  Amp Validation

/  error  CSS syntax error in tag 'div' - the property 'position' is set to the disallowed value 'fixed'.  https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages
user3612643
  • 5,096
  • 7
  • 34
  • 55
  • position:sticky ? – G-Cyrillus Mar 02 '20 at 21:26
  • @G-Cyrillus also banned – user3612643 Mar 02 '20 at 21:26
  • okay :( , did you see that one ? https://stackoverflow.com/questions/50827468/google-amp-sticky-header-possible demo here https://amp-demos.glitch.me/sticky-header.html validates at https://validator.ampproject.org/#url=https%3A%2F%2Famp-demos.glitch.me%2Fsticky-header.html – G-Cyrillus Mar 02 '20 at 21:34
  • That's weird. I tried both sticky/fixed and validation failed locally. Also, check https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii line 3106 " # CSS property `position` with values `fixed` and `sticky are not allowed." – user3612643 Mar 02 '20 at 21:46
  • funny, for me : https://validator.ampproject.org/#url=https%3A%2F%2Famp-demos.glitch.me%2Fsticky-header.html it says it is passing the test ? file probably out of date from From https://www.w3schools.com/cssref/pr_class_position.asp – G-Cyrillus Mar 02 '20 at 21:50
  • Paste `
    ` after `` in your link will make it fail. I assume it works for non-inline styles???
     – user3612643 Mar 02 '20 at 21:57
  • I would trust the official online validator ;) ah i see, you mean validator being tricked ? – G-Cyrillus Mar 02 '20 at 21:58
  • 1
    Yes, it works if I extract "position:fixed" from the inline style into a global style sheet... – user3612643 Mar 02 '20 at 21:59

1 Answers1

2

Thanks for https://stackoverflow.com/users/2442099/g-cyrillus to point out the solution:

The validation fails if position: fixed is used as inline style.

Using

.fixed {
  position: fixed;
}

and

<div class="fixed" style="background:red;right:-50px;padding-left:50px;padding-right:50px;transform:translateY(100%) rotate(45deg)">

the amp-validator can be convinced.

user3612643
  • 5,096
  • 7
  • 34
  • 55