Well the problem is that when zooming in too much your main line is outside the viewport and so may not be visible. As a result the central line is not visible and thus your style goes off. This is why you may see all lines as long as main line (green one) is within ol viewport.
A workaround to solve your issue is to use a renderBuffer
when configuring your layer
So this piece of code:
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style:lineString
});
Should turn into this
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
renderBuffer:100000,//here I use 100000 pixels offset so make sure ol will draw the line event if it is 100000 pixels away from viewport
style:lineString
});
You may see the api docs here --> https://openlayers.org/en/v3.20.1/apidoc/ol.layer.Vector.html
The solution above should solve your issue but if you have many lines you would have performance issues. A proper solution, in my personal opinion, is to draw the extra lines to a vector layer and so they will always been visible, as long as they exist in the viewport, no matter the zoom level.
In that way you will not force ol to draw lines 10000 pixels away from your viewport and thus you should not have any performance issues.