Looking into optimizing CSS, want to discuss design decisions
Closed this issue · 5 comments
I find your take on the lightbox solution the best by far atm. There's still some things that could be done better.
- Prefixes in CSS - I'd prefer to add grunt autoprefixer to handle this instead of poluting the code with something that needs to be maintained
- Variables in CSS - need to namespace them and add
!defaultflags. This allows them to be defined externally so developers can easily include the fluidbox.scss in their Sass builds. - Rename fluidbox.scss to _fluidbox.scss - prefix the filename with an underscore so that it can be included in Sass builds as a partial. Add another non-underscored scss file which imports the _fluidbox.scss for our build.
- Is there any particular reason for using translate instead of translate3d? The later improves rendering performance.
What are your thoughts on this?
Strange—I swore I wrote a reply but it didn't show!
Anyway, the gist of my reply is that all your suggestions are very legitimate and can be easily implemented. The only exception is with point number 4—using translate3d has messed up rendering of the enlarged image for me on selected browser versions, and that hopefully in the near future modern browsers are smart enough to off-load transforms to the GPU, even when they are done in 2D space.
Do you remember which browsers caused problems? It might be a combination of specific css properties that's causing them not neccessarily 3d transforms.
I honestly cannot recall that. The enlarged, rendered image has been a major issue because of how z-index works and that there are many possible CSS properties that can mess up the stacking index.
The current solution is the one that worked so far, so I don't see a major incentive to change to CSS 3D transform unless there's a fatal flaw with its 2D counterpart.
Most of your suggestions are implemented in 51a4779 :)
Looking out for any bugs, and will squash them before the next release.
Nice, I'll have a look :)