Style attribute binding gets overridden by pre-rendering

I build a simple “parallax” using vuejs style binding :style and I found out that the prerender-spa-plugin executed phantomjs, which added static inline styles (eg. style="-webkit-transform: translateY(0px);") which, once generated, overrides the actual style-binding of the app.

For this reason I would maybe propose the possibility of skipping inline-style attributes when pre-rendering the application…would that be easy to implement, or: does someone could point me towards a (good) solution to work around this issue?

[drewlustro]

Great idea!

I’m currently working on an adaptor of this that employs Chrome Headless via puppeteer instead of phantomJS, so we’ll soon have more robust API’s as that matures.

---

In terms of what you can do right now to solve this issue, consider using options.postProcessHtml by providing regex to strip out applicable:

<div class="foo" style="transform: translate3d(0, 0, 1);"> ... </div>
<!-- ➡️  -->
<div class="foo">... </div>

webpack.config.js

// Manually transform the HTML for each page after prerendering,
// for example to set the page title and metadata in edge cases
// where you cannot handle this via your routing solution.
//
// The function's context argument contains two properties:
//
// - html :: the resulting HTML after prerendering)
// - route :: the route currently being processed
//            e.g. "/", "/about", or "/contact")
//
// Whatever is returned will be printed to the prerendered file.
postProcessHtml: function (context) {
  var titles = {
    '/': 'Home',
    '/about': 'Our Story',
    '/contact': 'Contact Us'
  }
  return context.html.replace(
    /<title>[^<]*<\/title>/i,
    '<title>' + titles[context.route] + '</title>'
  )
}

Hope that helps. Cheers.

[ricricucit]

no, sorry, I’m not sure I should be the one closing issues 😛